<template>
	<!--components/load-more/index.wxml-->
	<view class="loadmore" :hidden="!showThis" @tap="clickLoadMore">
		<image :class="'icon ' + (showIcon?'active':'')" src="/static/common/icon_loading.png" :hidden="!showIcon">
		</image>
		<view style="font-size: 28rpx;color: black;">{{text}}</view>
	</view>
</template>

<script>
	export default {
		name: "load_more",
		data() {
			return {
				showThis: true,
				text: '加载中......',
				showIcon: false,
				isLoading: false,
			};
		},

		components: {},
		props: {

			hasMore: {
				type: Boolean,
				default: false
			},
			// 加载中的显示文本
			loadingText: {
				type: String,
				default: '加载中...'
			},
			// 加载失败的显示文本
			failText: {
				type: String,
				default: '加载失败, 请点击重试!'
			},
			// 没有更多后的显示文本, 默认没有则隐藏加载更多控件
			finishText: {
				type: String,
				default: ''
			},
			// 列表渲染延时, 默认为 500 ms, 我在开发工具中测试列表渲染速度时快时慢, 可根据实际使用中界面复杂度自行调整
			// ps 如果能监听setData() 渲染结束的话则可以不需要延时 
			listRenderingDelay: {
				type: Number,
				default: 100
			}
		},
		methods: {
			//加载更多的入口方法, 直接在page中使用时请在onReachBottom() 方法中调用这个方法, 并实现loadMoreListener方法去获取数据
			loadMore: function() {
				if (!this.hasMore) {
					console.log('load more finish');
					return;
				}

				if (this.isLoading) {
					console.log('loading ...');
					return;
				}

				this.isLoading = true
				console.log("emit load more")
				this.$emit('loadMoreListener');
			},
			//加载完成, 传入hasMore 
			loadMoreComplete: function(hasMore) {
				this.hasMore = hasMore
				// var hasMore = data.curPage < data.pageCount && data.pageCount != 1;
				var text = '',
					showThis = false,
					showIcon = false;

				if (hasMore) {
					showIcon = true;
					showThis = true;
					text = this.loadingText;
				} else if (this.finishText.length > 0) {
					text = this.finishText;
					showThis = true;
				}
				this.hasMore = hasMore,
					this.text = text,
					this.showIcon = showIcon,
					this.showThis = showThis


				setTimeout(function() {
					this.isLoading = false
				}.bind(this), this.listRenderingDelay);
			},
			// 加载失败
			loadMoreFail: function() {
				this.showIcon = false,
					this.text = this.failText



				setTimeout(function() {
					this.isLoading = false

				}.bind(this), this.listRenderingDelay);
			},
			//点击 loadmore 控件时触发, 只有加载失败时才会进入页面回调方法
			clickLoadMore: function() {
				if (this.text != this.failText) return;


				this.showIcon = true,
					this.text = this.loadingText,
					this.isLoading = true

				this.$emit('clickLoadMore');
			},
			setLoading(loading) {
				this.isLoading = loading
			}
		}
	};
</script>
<style>
	.loadmore {
		height: 35px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.loadmore text {
		font-size: 13px;
		color: #bfbfbf;
		font-weight: bold;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

	.icon {
		width: 25px;
		height: 25px;
		margin-right: 10px;
	}

	.active {
		animation: weuiLoading 0.6s steps(12, end) infinite;
	}

	@keyframes weuiLoading {
		0% {
			transform: rotate3d(0, 0, 1, 0deg);
		}

		100% {
			transform: rotate3d(0, 0, 1, 360deg);
		}
	}
</style>
